<template>
  <div
    :class="{
      outline: true,
      'active-outline': id === editorStore.currentComponentId,
    }"
    @click="editorStore.setCurrentComponentId(id)"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import useEditorStore from "@/store/modules/editor";
import { componentInstall } from "@/materials";

defineOptions({
  name: "Wrapper",
});

defineProps({
  id: {
    type: String,
    required: true,
  },
});

const editorStore = useEditorStore();
</script>

<style lang="scss" scoped>
.outline {
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: 4px;
  &:hover {
    border-style: dashed;
    border-color: #197aff;
  }
  &.active-outline {
    margin: -1px;
    border-width: 2px;
    border-style: solid;
    border-color: #197aff;
  }
}
</style>
